<template>
  <div>
    <el-drawer
      size="80%"
      direction="ttb"
      :with-header="false"
      :visible.sync="visible"
    >
      <el-form
        ref="shoppingBill"
        :model="shoppingBill"
        label-width="auto"
        size="mini"
        inline
      >
        <el-divider>BILL-SUMMARY</el-divider>

        <el-descriptions>
          <el-descriptions-item prop="code" label="No. ">
            <el-tag size="small" type="success">{{
              shoppingBill.shoppingBillCode
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item prop="supplyCompany" label="supplyCompany：">
            <span>{{ shoppingBill.supplyCompany }}</span>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider>MATERIAL-DETAIL</el-divider>
        <el-table
          ref="shoppingBillItems"
          :data="shoppingBill.shoppingBillItems"
          max-height="300px"
          border
          show-summary
          :summary-method="summaryMethod"
        >
          <el-table-column
            type="index"
            align="center"
            label="--"
          ></el-table-column>
          <!--          <el-table-column type="selection" align="center"></el-table-column>-->

          <el-table-column align="left" width="256" label="品名">
            <template #default="{ row }">
              <el-link type="success" icon="el-icon-s-goods">{{
                row.goodsCode
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column align="center" label="品名" prop="goodsName">
          </el-table-column>
          <el-table-column align="center" label="单价" prop="goodsPrice">
          </el-table-column>
          <el-table-column sortable width="150" prop="quantity" label="数量">
          </el-table-column>
          <el-table-column
            prop="summary"
            label="小计"
            :formatter="summaryFormat"
          ></el-table-column>
        </el-table>
        <el-divider>OPERATOR-SIGN</el-divider>
        <el-descriptions border size="small">
          <el-descriptions-item label="申请人">
            <el-tag type="warning">{{
              shoppingBill.submitter
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="审核人">
            <el-tag>
              {{
                ($store.state.userInfo && $store.state.userInfo.username) ||
                "匿名用户"
              }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div>
          <el-button type="warning" icon="el-icon-remove" @click="agree"
            >审核通过
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="refuse"
            :disabled="disableAudit"
            >审核不通过
          </el-button>
        </div>
      </el-form>
      <!-- <el-form-item :prop="'shoppingBillItems.' + that.$index + '.quantity'"/>-->
    </el-drawer>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
import { basic } from "@/api";

export default {
  name: "ShoppingAudit",
  components: {},
  mixins: [],
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      visible: false,
      selected: [],
      shoppingBill: {
        supplyCompany: null,

        shoppingBillItems: [],

        shoppingBillCode: null,
        submitter: null,
        auditor: null,
        amount: 0,
        updateTime: null,
        abandon: false,
        submitTime: null,

        shoppingState: "toSubmit",
        auditScore: -1,
        resubmitTimes: 0,
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    disableAudit() {
      return this.shoppingBill.shoppingState !== "toAudit";
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    appear(id) {
      /*  this.$http({
        method: "get",
        url: `http://localhost:9090/swimming/shopping/find/${id}`,
      })*/
      basic.findById(id).then(
        (res) => {
          this.shoppingBill = res.data;
          this.$nextTick(() => {
            this.visible = true;
          });
        },
        (error) => {
          console.log(".data request error : " + error.response.status);
        }
      );
    },
    summaryMethod({ columns }) {
      //column对象是 el-table-column代表的元信息列 如prop属性property 等
      //columns整体 为 List<column> 纵向
      //data 整体为List<row> 横向
      //理解好 row[column.property]
      const sums = [];
      sums[0] = "总";
      // sums[columns.length - 1] = data.reduce((pre, cur) => {
      //   pre = pre + cur.goodsCode * cur.goodsPrice;
      //   return pre;
      // }, 0);
      sums[columns.length - 1] = this.shoppingBill.amount;
      return sums;
    },
    summaryFormat(row) {
      return row.goodsPrice * row.quantity;
    },
    audit(id, score) {
      /*this.$http({
        method: "put",
        url: "http://localhost:9090/swimming/shopping/audit",
        data: {
          shoppingBillCode: id,
          auditScore: score,
        },
      });*/
      basic.audit({ shoppingBillCode: id, auditScore: score }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.visible = false;
          this.$emit("post-submit");
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    agree() {
      this.audit(this.shoppingBill.shoppingBillCode, 80);
    },
    refuse() {
      this.audit(this.shoppingBill.shoppingBillCode, 20);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-drawer {
  .el-form {
    width: 72%;
    margin-left: 260px;
  }
}
</style>
